<template>
  <div class="container">
    <div id="chat-window"></div>
    <div id="user-input-container" class="input-container">
      <select id="messageType">
        <option value="predict">预测判决年限</option>
        <option value="cut">分词</option>
        <option value="pos">词性标注</option>
        <option value="ner">命名体识别</option>
        <option value="syna">句法分析</option>
        <option value="ke">关键词提取</option>
      </select>
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
      <el-button @click="sendMessage" type="success" plain>Send</el-button>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { addUserMessage, addBotMessage } from '@/utils/chat-v1'

export default {
  data() {
    return {
      textarea: ''
    }
  },
  methods: {
    getSelect: function () {
      const messageTypeSelect = document.getElementById('messageType');
      const selectedOption = messageTypeSelect.selectedOptions[0];
      const selectedIndex = messageTypeSelect.selectedIndex;
      const selectedText = selectedOption.text;
      const selectedValue = selectedOption.value;
      console.log(`Selected Index: ${selectedIndex}`);
      console.log(`Selected Text: ${selectedText}`);
      console.log(`Selected Value: ${selectedValue}`);
      return { index: selectedIndex, text: selectedText, value: selectedValue }
    },
    showResult: function (resp, selectValue) {
      let { data, message } = resp;
      if (resp['status-code'] != 200) return Message.error(message)
      if (selectValue == 'predict') addBotMessage(`判处${data.result[0]}年${data.result[1]}月${data.result[2]}日`)
      else addBotMessage(`${data.result}`)
      this.textarea = ''
    },
    sendMessage: function() {
      const userInput = this.textarea
      if (userInput.trim() === '') return
      addUserMessage(userInput)
      console.log(userInput)
      let { index, text, value } = this.getSelect()
      const url = 'http://10.8.15.133:8080/apiv1/law';
      const data = { type: value, content: userInput };
      fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      }).then(response => response.json()).then(data => {
        console.log('Success:', data);
        this.showResult(data, value)
      }).catch((error) => {
        console.error('Error:', error);
      })
    }
  }
}
</script>

<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f6f6f6;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 80%;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 800px;
}

.message-container {
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.user-message {
  background-color: #70a4ee;
  color: #060200;
  padding: 10px 15px;
  border-radius: 10px;
  max-width: 70%;
  margin-right: 30px;
}

.bot-message {
  background-color: #d11b1b;
  color: #f5f4f4;
  padding: 10px 15px;
  border-radius: 10px;
  max-width: 70%;
  margin-left: 30px;
}

.user-message-container {
  display: flex;
  justify-content: flex-end;
}

.bot-message-container {
  display: flex;
  justify-content: flex-start;
}

#chat-window {
  overflow-y: scroll;
  flex-grow: 1;
}

#user-input-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

#user-input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
}

.input-container {
  display: flex;
  padding: 10px;
  background-color: #f0f0f0;
}

::-webkit-scrollbar {
  width: 3px;
  /* 设置滑动栏宽度 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* 设置滑动栏背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  /* 设置滑动栏滑块颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 设置滑动栏滑块鼠标悬停时的颜色 */
}


select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
  outline: none;
}
</style>
